﻿@{
	ViewBag.Title = "Index";
}

<div class="index-map">
	<h2>Maps</h2>
	<span>I want to...</span>
	<ul class="actions">
		<li><a class="button create-map" href="#" data-bind="click: createMap">Create A Map</a></li>
		<li><a class="button clear" href="#" data-bind="click: clearMaps">Clear Maps</a></li>
	</ul>
	<table class="existing-maps hidden" data-bind="css: { hidden: maps().length <= 0 }">
		<thead>
			<tr>
				<td class="column map-id">ID / View</td>
				<td class="column map-name">Name</td>
				<td class="column delete-action"></td>
			</tr>
		</thead>
		<tbody data-bind="foreach: maps">
			<tr>
				<td>
					<a class="button" data-bind="attr: { href: '/Map/Edit/' + id()}, text: id ">
					</a>
				</td>
				<td>
					<span data-bind="text: name"></span>
				</td>
				<td>
					<a href="#" class="button" data-bind="click: $root.deleteMap">Delete</a>
				</td>
			</tr>
		</tbody>
	</table>
	<div class="center hidden" data-bind="css: { hidden: maps().length > 0 }">
		<a class="no-decoration" href="#" data-bind="click: createMap">
			<img style="border-radius:1em;" src="/Content/Images/no-maps.jpg" alt="Y U NO HAZ MAPS?" />
			<p class="no-space">(click to make one)</p>
		</a>
	</div>
</div>

<script src="/Scripts/models/entity-models.js"></script>
<script src="/Scripts/models/page-models.js"></script>
<script src="/Scripts/page/map-index-page.js"></script>
